<script setup lang="ts">
import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue'
// ref 深层次的响应
// shashallowRef 浅层次的响应 只能到 .value
// ref与shallowRef 不能混着写 不然会影响 shallowRef 造成视图的更新
// triggerRef 强制收集依赖更新
// customRef 自定义ref
const info = ref({ name: 'Charles' })
const info2 = shallowRef({ name: 'Kobe' })
const change = () => {
    info.value.name = 'wzy' // ref 可以更改
    info2.value.name = 'wzy2' // shallowRef 无法更改视图  但是值已经更改了
    // info2.value = {
    //     name: 'wzy2' // 可以更改
    // }
    triggerRef(info2)
    console.log(info2)
    obj.value = 'customRef 被修改啦！'
    console.log(obj)
    console.log('dom元素', dom.value?.innerText)
}
// ref 获取dom元素
const dom = ref<HTMLElement>()

// 自定义ref
function MyRef<T>(value: T) {
    let timer: any
    return customRef((track, trigger) => {
        return {
            get() {
                track() // 追踪后续数据的变化
                return value
            },
            set(newValue) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log('触发了')
                    value = newValue
                    trigger() // 重新解析模板
                    timer = null
                }, 500)
            }
        }
    })
}
const obj = MyRef<string>('customRef wzy')
</script>

<template>
    <h1>Ref</h1>
    <div class="test">ref: {{ info.name }}</div>
    <hr />
    <div class="test">shallowRef: {{ info2.name }}</div>
    <hr />
    <div class="test">customRef: {{ obj }}</div>
    <hr />
    <div ref="dom">获取dom元素</div>
    <button @click="change">修改</button>
</template>

<style scoped></style>
